<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>锅打灰太狼</title>
		<style type="text/css">
			.box{
				overflow: hidden;
				width: 320px;
				height: 480px;
				background-image: url("images/game_bg.jpg");
				margin: 20px auto;
				position: relative;
			}
			.score{
				margin:10px 0px 0px 60px;
				font-size: 20px;
				color: white;
			}
			.start, .info{
				font-size: 30px;
				color: red;
				text-shadow: 0px 0px 5px yellow;
				text-align: center;
			}
			.start{
				margin-top: 170px;
			}
			.wolf{
				position: absolute;
				background-image: url(images/h0.png);
				width: 108px;
				height: 101px;
				background-repeat:no-repeat;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="score">0</div>
			<div class="start">开始</div>
			<!-- <div class="info">游戏操作说明</div> -->
		</div>
	</body>
	<script type="text/javascript">
	for(var i = 0; i < 15; i++){
		document.createElement("img").src = "images/h"+i+".png"
	}
		// 每隔1秒在随机的位置出现一只狼，狼还分为小灰灰和灰太狼，最多同时可以看到2只狼，位置不会重叠。有出现、消失的动画
		// 点击狼，狼会出现打晕的动画，并根据狼的类型来加分和减分。
		var zuoBiao = [["115px", "98px"],["160px", "17px"],["220px", "15px"],["293px", "30px"],["273px", "120px"],["295px", "207px"],["211px", "200px"],["141px", "187px"],["190px", "100px"]];

		// 1、写背景图

		// 2、点击开始开始游戏（开始按钮）
		var start = document.getElementsByClassName('start')[0];
		var box = document.getElementsByClassName('box')[0];
		var lastIndex = 44;
		var num = 0;
		start.onclick = function(){
			start.style.display = "none";
			var speed = 300;
			var createWolfTimer = setInterval(createWolf, speed);

			setTimeout(function(){
				speed = 1000;
				clearInterval(createWolfTimer);
				createWolfTimer = setInterval(createWolf, speed)
			}, 5000)
			
		}

	function createWolf(){
		// 3、在固定(第一个)的位置出现一只狼
		var wolf = document.createElement("div");
		wolf.className = "wolf";

		// 7、随机狼的位置。（不能重复）
		// num 0   lastIndex 44
		// 第一种不重复。（最多2只）
		// do{
		// 	num = parseInt(Math.random()*zuoBiao.length);
		// }while(num == lastIndex)
		// lastIndex = num;

		var num = parseInt(Math.random()*zuoBiao.length)
		var arr = zuoBiao.splice(num, 1);
		wolf.style.top = arr[0][0];
		wolf.style.left = arr[0][1];



		box.appendChild(wolf);

		// 6、给狼添加类型。根据类型不同来加分或减分。
		var type = Math.random()*10 > 7 ? "x" : "h";
		wolf.style.backgroundImage = "url('images/"+ type +"0.png')";


		// 5、添加点击事件，点击之后狼会被打晕，+10分
		wolf.onclick = function(){
			clearInterval(upTimer);
			var count = 11;
			var hitTimer = setInterval(function(){
				wolf.style.backgroundImage = "url('images/"+ type + count +".png')";
				count++;
				if (count >= 15) {
					clearInterval(hitTimer);
					wolf.remove();
					zuoBiao.push(arr[0]);
				}

			}, 100); 
		}


		// 4、添加上升、下降的动画（1S
		var count = 1;
		var upTimer = setInterval(function(){
			wolf.style.backgroundImage = "url('images/" + type + count +".png')";
			count++;
			if (count == 11) {
				clearInterval(upTimer);
				wolf.remove();
				zuoBiao.push(arr[0]);

			}
		}, 100);

	}
	
		
		









		


		
	</script>
</html>